<template>
  <div>
      <div id="scrolling-container">
          <div id="toolbar"></div>
          <quill-editor :content="content"
                    :options="editorOption"
                    @change="onEditorChange($event)"></quill-editor>
      </div>
      <button type="button" @click="submitEdit">提交</button>
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
var toolbarOptions = ['bold', 'italic', 'underline', 'strike'];

export default {
    data(){
        return {
            content:'',
            editorOption:{
                debug: 'info',
                placeholder: '请输入文本',
                readOnly: false,
                scrollingContainer:'#scrolling-container' ,
                theme: 'snow' ,
                modules:{
                    toolbar:{
                        toolbarOptions,
                        handlers: {
                            // handlers object will be merged with default handlers object
                            'link': function(value) {
                            if (value) {
                                var href = prompt('Enters the URL');
                                this.quill.format('link', href);
                            } else {
                                this.quill.format('link', false);
                            }
                            }
                        }
                    } 
                }
            }
        }
    },
    components:{
        quillEditor
    },
    methods:{
        submitEdit(){
            console.log(this.content)
        },
        onEditorChange(e){
            this.content = e.html ;
        }
    }
}
</script>

